<template>
  <div class="box">
     <div class="hearder">
         <div class="logo">

         </div>
         <div class="rigth">
             <div class="btn">按钮</div>
             <div class="btn">按钮</div>
         </div>
     </div>
     <div class="center">
         <div class="siber">

         </div>
         <div class="contion">
             <div class="box-6" v-for="v in 6" :key="v">
                 {{ v }}
             </div>
         </div>
     </div>
     <div class="footer">2222222</div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
    
    .box {
        height: 100%;
        // background: skyblue;
        display: flex;
        flex-direction: column;
        justify-content: space-between ;
        .hearder{
            height: 80px;
            background: pink;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .logo{
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background: #fff;
            }
            .rigth{
               display: flex;
               .btn{
                    width: 60px;
                    height: 50;
                    border-radius: 20px;
                    background: #fff;
                    text-align: center;
                    margin-left: 10px;
               }
            }
        }
        .center{
            flex: 1;
            background: #fff;
            display: flex;
            height: 100%;
            .siber{
                width: 300px;
                height: 100%;
                background: skyblue;
            }
            .contion{
                flex: 1;
                width: 100%;
                height: calc(100vh - 130px);
                background: slateblue;
                display: flex;
                flex-wrap: wrap;
                overflow-y: auto;
                .box-6{
                    width: 50%;
                    height:500px;
                    border: 1px solid #000;
                    background: #fff;
                    box-sizing: border-box;
                }
            }
        }
        .footer{
            height: 50px;
            background: pink;
        }
    }
    
</style>